<template>
  <div class="rotation">
    <!-- 轮播图89846546546546 -->
    <template>
      <el-carousel :interval="4000" type="card" height="330px">
        <el-carousel-item>
          <div class="box1">
            <div id="echart"></div>
          </div>
        </el-carousel-item>
        <!-- 第二个 -->
        <el-carousel-item>
          <div class="box2">
            <div id="echart"></div>
          </div>
        </el-carousel-item>
        <!-- 第三个 -->
        <el-carousel-item>
          <div class="box3">
            <div id="echart"></div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </template>
  </div>
</template>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    drawLine1() {
      // 初始化echarts实例
      let myCharts = this.$echarts.init(document.querySelector('.box2 #echart'))
      var option = {
        backgroundColor: '#030d41',

        title: {
          text: '用户列表数据',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#fff',
          },
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },

        visualMap: {
          show: false,
          min: 120,
          max: 600,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 274, name: '联盟广告' },
              { value: 235, name: '视频广告' },
              { value: 400, name: '搜索引擎' },
            ].sort(function (a, b) {
              return a.value - b.value
            }),
            roseType: 'radius',
            label: {
              color: 'rgba(255, 255, 255, 0.8)',
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            itemStyle: {
              color: 'skyblue',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200
            },
          },
        ],
      }
      myCharts.setOption(option)
    },
    drawLine2() {
      // 初始化echarts实例
      let myCharts = this.$echarts.init(document.querySelector('.box1 #echart'))
     var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          position: function (p) {
            //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10]
          },
        },
        legend: {
          top: '90%',
          itemWidth: 10,
          itemHeight: 10,
          data: ['0岁以下', '20-29岁', '30-39岁', '40-49岁', '50岁以上'],
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12',
          },
        },
        series: [
          {
            name: '年龄分布',
            type: 'pie',
            center: ['50%', '42%'],
            radius: ['40%', '60%'],
            color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
            label: { show: false },
            labelLine: { show: false },
            data: [
              { value: 1, name: '0岁以下' },
              { value: 4, name: '20-29岁' },
              { value: 2, name: '30-39岁' },
              { value: 2, name: '40-49岁' },
              { value: 1, name: '50岁以上' },
            ],
          },
        ],
      }

      myCharts.setOption(option)
    },
    drawLine3() {
      // 初始化echarts实例
    let myCharts = this.$echarts.init(document.querySelector('.box3 #echart'))
  var option = {
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff"
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      bottom: "0%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        name: "地区分布",
        type: "pie",
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        // 图形的文字标签
        label: {
          fontSize: 10
        },
        // 链接图形和文字的线条
        labelLine: {
          // length 链接图形的线条
          length: 6,
          // length2 链接文字的线条
          length2: 8
        },
        data: [
          { value: 20, name: "云南" },
          { value: 26, name: "北京" },
          { value: 24, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 25, name: "浙江" },
          { value: 30, name: "四川" },
          { value: 42, name: "湖北" }
        ]
      }
    ]
  };

      myCharts.setOption(option)
    },
  },
  mounted() {
    this.drawLine1()
    this.drawLine2()
    this.drawLine3()
  },
}
</script>

<style>
.el-carousel {
  margin-top: 15px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  text-align: center;
  line-height: 330px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #030d41;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #030d41;
}
#echart {
  width: 800px;
  height: 330px;
}
</style>